<template>
  <div class="mod-config">
    <table-view ref="view"
                :searchAttrs="searchAttrs"
                :primaryKey="primaryKey"
                :listApiName="listApiName"
                :deleteApiName="deleteApiName"
                :exportApiName="exportApiName"
                :saveAuthName="saveAuthName"
                :deleteAuthName="deleteAuthName"
                :showAttrs="showAttrs"
                :exportAuthName="exportAuthName"
                :exportPlantFunc="exportPlantFunc"
                :printFunc='printFunc'
    >
    </table-view>
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>


    <el-dialog
      title="批量出库计划"
      :visible.sync="orderPlanNoticeVisible"
      width="90%">

      <el-form
        ref="dataForm"
        label-width="120px"
        label-position="left"
        style="margin-left:30px"
      >

        <el-form-item label="出库时间" style="width: 400px">
          <el-date-picker
            v-model="outTime"
            align="right"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>


      </el-form>

      <el-table
        :data="tableListData"
        border
        style="display: inline-block">
        <el-table-column
          prop="id"
          label="订单编号"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <el-select v-model="scope.row.orderDetailId" disabled placeholder="请选择"  >
              <el-option
                v-for="item in orderDetailList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column
          prop="productId"
          label="产品名称"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <el-select v-model="scope.row.productId"  disabled placeholder="请选择">
              <el-option
                v-for="item in productInfoList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column
          prop="customerRequire"
          label="规格描述"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <el-input controls-position="right" size="small" :min="0"  v-model="scope.row.customerRequire" placeholder="规格描述"></el-input>
          </template>
        </el-table-column>

        <el-table-column
          prop="boxSupplyWay"
          label="纸箱供应方式"
          align="center"
          width="110"
        >
          <template slot-scope="scope">
            <el-select v-model="scope.row.boxSupplyWay" clearable filterable placeholder="包装"  @change="numberChanged(scope.$index)">
              <el-option label="纸箱" :value=0>纸箱</el-option>
              <el-option label="托盘" :value=1>托盘</el-option>
              <el-option label="自供" :value=2>自供</el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column
          prop="boxZhiNumber"
          label="箱只"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <el-input-number controls-position="right" size="small"  v-model="scope.row.boxZhiNumber" placeholder="箱只" @change="numberChanged(scope.$index)"></el-input-number>
          </template>
        </el-table-column>

        <el-table-column
          prop="boxNumber"
          label="箱数"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <el-input-number controls-position="right" size="small"  v-model="scope.row.boxNumber" placeholder="箱数"  @change="numberChanged(scope.$index)"></el-input-number>
          </template>
        </el-table-column>

<!--        <el-table-column-->
<!--          prop="trayEachZhiNumber"-->
<!--          label="托盘每层只数"-->
<!--          controls-position="right"-->
<!--          align="center"-->
<!--        >-->
<!--          <template slot-scope="scope">-->
<!--            <el-input-number controls-position="right" size="small" :min="0"  v-model="scope.row.trayEachZhiNumber" placeholder="托盘每层只数" @change="numberChanged(scope.$index)"></el-input-number>-->
<!--          </template>-->
<!--        </el-table-column>-->

<!--        <el-table-column-->
<!--          prop="trayLayerNumber"-->
<!--          label="托盘层数"-->
<!--          controls-position="right"-->
<!--          align="center"-->
<!--        >-->
<!--          <template slot-scope="scope">-->
<!--            <el-input-number controls-position="right" size="small" :min="0"  v-model="scope.row.trayLayerNumber" placeholder="托盘层数" @change="numberChanged(scope.$index)"></el-input-number>-->
<!--          </template>-->
<!--        </el-table-column>-->

<!--        <el-table-column-->
<!--          prop="trayNumber"-->
<!--          label="托盘数量"-->
<!--          controls-position="right"-->
<!--          align="center"-->
<!--        >-->
<!--          <template slot-scope="scope">-->
<!--            <el-input-number controls-position="right" size="small" :min="0"  v-model="scope.row.trayNumber" placeholder="托盘数量" @change="numberChanged(scope.$index)"></el-input-number>-->
<!--          </template>-->
<!--        </el-table-column>-->

        <el-table-column
          prop="scrapNumber"
          label="零头"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <el-input-number controls-position="right" size="small"  v-model="scope.row.scrapNumber" placeholder="零头"  @change="numberChanged(scope.$index)"></el-input-number>
          </template>
        </el-table-column>

        <el-table-column
          prop="realSaleNumber"
          label="出库数量"
          align="center"
        >
          <template slot-scope="scope">
            <el-input-number controls-position="right" size="small"  v-model="scope.row.realSaleNumber" placeholder="出库数量"></el-input-number>
          </template>
        </el-table-column>

        <el-table-column
          prop="remark"
          label="备注"
          align="center"
        >
          <template slot-scope="scope">
            <el-input type="textarea" controls-position="right" size="small" :min="0"  v-model="scope.row.remark" placeholder="备注"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100px"

        >
          <template slot-scope="scope">
            <el-button
              @click="addRow(scope.$index)"
              size="small"
              type="success"
              icon="el-icon-plus"
              circle>
            </el-button>
            <el-button v-if="tableListData.length>1"
                       size="small"
                       @click="deleteRow(scope.$index)"
                       icon="el-icon-delete"
                       type="danger"
                       circle>

            </el-button>

          </template>
        </el-table-column>
      </el-table>


      <span slot="footer" class="dialog-footer">
        <el-button @click="orderPlanNoticeVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveProductLeavePlanInfo">确 定</el-button>
      </span>

    </el-dialog>
  </div>
</template>


<script>
  import tableView from '@/components/tableView'
  import basicMixins from '@/utils/commonViewMixins'
  import AddOrUpdate from './consignnotedetail-add-or-update'
  import {mRequest} from '@/utils/request'

  export default {
    mixins: [basicMixins],
    data() {
      return {
        primaryKey: 'id',
        listApiName: 'consignApi/listConsignNoteDetailList',
        deleteApiName: 'consignApi/deleteConsignNoteDetail',
        exportApiName: 'consignApi/getConsignNoteDetailExport',
        saveAuthName: 'consign:consignnotedetail:save',
        deleteAuthName: 'consign:consignnotedetail:delete',
        exportAuthName: 'consign:consignnotedetail:delete',
        tableListData: [],
        orderDetailList: [],
        productInfoList: [],
        outTime: '',
        orderPlanNoticeVisible: false,
        searchAttrs: {},
        showAttrs: {

          contractOrderNo: {
            label: "业务合同编号",
            width: 140
          },
          orderDetailNo: {
            label: "订单编号",
            width: 140
          },
          productNo: {
            label: "产品编号",
            width: 170
          },
          customerRequire:{
            label: "规格描述",
            width: 170
          },
          realName:{
            label: '业务员'
          },
          inventory: {
            label: '库存数量'
          },
          location: {
            label: "存放位置"
          },
          deliveryType:{
            label: '数量类型',
            type: 'radio',
            items: [
              {text: '按数量', value: 0},
              {text: '全发', value: 1,tagType: 'success'}
            ]
          },
          deliveryNumber: {
            label: "预发货数量"
          },

          deliveryTime: {
            label: "发货日期"
          },
          weightInfo: {
            label: "重量"
          },
          remark: {
            label: "备注"
          },
          // contractOrderNo: {
          //   label: "合同编号"
          // },
          status: {
            label: "状态",
            type: 'radio',
            items: [
              {text: '取消', value: 0,tagType: 'info'},
              {text: '未发货', value: 1,tagType: 'danger'},
              {text: '已出库', value: 5,tagType: 'success'},
            ]
          }
        }
      }
    },
    components: {
      tableView,
      AddOrUpdate
    },
    methods: {

      exportPlantFunc(rows) {
        this.outTime = ''
        this.orderPlanNoticeVisible = true
        this.initOrderDetailList()
        this.initProductInfoList()
        rows.forEach(item=>{
          item.realSaleNumber = item.deliveryNumber
          item.boxZhiNumber = 0
          item.boxNumber = 0
          item.scrapNumber = 0
        })
        this.tableListData = rows

      },
      saveProductLeavePlanInfo() {

        console.log(JSON.stringify(this.tableListData))
        mRequest('productApi/multipleSaveProductLeaveStorage', {
          'outTime': this.outTime,
          'tableListData': this.tableListData
        }, (res => {
          let data = res.data
          if (data && data.code == 0) {
            let productLeaveInfoList = data.list
          //  this.printFunc(productLeaveInfoList)
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.orderPlanNoticeVisible = false
                this.getDataList()
                this.$emit('refreshDataList')
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        }))

      },
      initOrderDetailList() {
        mRequest('orderApi/getOrderDetailList', {}, (res) => {
          this.orderDetailList = this.R.pathOr([], ['data', 'list'], res)
        })
      },
      initProductInfoList() {
        mRequest('productApi/getProductInfoList', {}, (res) => {
          this.productInfoList = this.R.pathOr([], ['data', 'list'], res)
        })
      },
      numberChanged(index) {
        const packType = this.R.propOr(0, 'boxSupplyWay', this.tableListData[index])
        const productWeight = this.R.propOr(0, 'productWeight', this.tableListData[index])

        if (packType !== 1) {
          const boxNumber = this.R.propOr(0, 'boxNumber', this.tableListData[index])
          const boxZhiNumber = this.R.propOr(0, 'boxZhiNumber', this.tableListData[index])
          const scrapNumber = this.R.propOr(0, 'scrapNumber', this.tableListData[index])
          this.tableListData[index].realSaleNumber = boxNumber * boxZhiNumber + scrapNumber
        } else if (packType === 1) {
          const trayLayerNumber = this.R.propOr(0, 'trayLayerNumber', this.tableListData[index])
          const trayEachZhiNumber = this.R.propOr(0, 'trayEachZhiNumber', this.tableListData[index])
           const trayNumber = this.R.propOr(0, 'trayNumber', this.tableListData[index])
          const scrapNumber = this.R.propOr(0, 'scrapNumber', this.tableListData[index])

          // this.dataForm.countProductNumber = trayLayerNumber * trayEachZhiNumber * trayNumber + scrapNumber
          this.tableListData[index].realSaleNumber = trayLayerNumber * trayEachZhiNumber * trayNumber + scrapNumber
        }
        this.tableListData[index].weightCount = this.tableListData[index].realSaleNumber * productWeight
      },
      addRow(index) {
        let _object = this.tableListData[index]
        this.tableListData.push(_object);
      },
      deleteRow(i,index) {
        this.tableListData.splice(index, 1);
      },
      printFunc(rows) {
        this.$vBus.$emit('SHOW_PRINT_DIALOG', (win) => {
          const tmpDocument = this.R.prop('document', win)
          const content = tmpDocument.querySelector('#content')

          if (this.R.isNil(tmpDocument) || this.R.isNil(content)) {
            return
          }
          content.innerHTML = ''

          const addTd = (tr, str) => {
            const td = tmpDocument.createElement('td')

            td.innerText = str
            tr.appendChild(td)
          }
          const {outTime} = rows[0]
          const {tickerNo} = rows[0]

          tmpDocument.querySelector('#time').innerHTML = outTime.toString().substr(0,11)
          tmpDocument.querySelector('#tickerNo').innerHTML = tickerNo.toString()

          rows.forEach(row => {
            const {clientName, productNo, productWeight, boxSupplyWay, boxZhiNumber, trayEachZhiNumber, trayLayerNumber, boxNumber, trayNumber, weightCount, realSaleNumber,remark} = row
            const boxSupplyWayName = boxSupplyWay === 0 ? '纸箱' : boxSupplyWay===1 ? '托盘': '自供'
            const tr = tmpDocument.createElement('tr')

            addTd(tr, clientName)
            addTd(tr, productNo)
            addTd(tr, boxSupplyWayName)
            if (boxSupplyWay === 0) {
              addTd(tr, boxZhiNumber)
              addTd(tr, boxNumber)
            }
            else if (boxSupplyWay === 1) {
              addTd(tr, trayEachZhiNumber * trayLayerNumber)
              addTd(tr, trayNumber)
            } else {
              addTd(tr, boxZhiNumber )
              addTd(tr, boxNumber)
            }
            addTd(tr, realSaleNumber)
            addTd(tr, productWeight)
            addTd(tr, weightCount)
            addTd(tr, remark)

            content.appendChild(tr)
          })
        }, true,'print.html')
      },

    }
  }
</script>
